<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a {
				display: inline-block;
				height: 58px;
				width: 120px;
				background-color: hotpink;
				text-align: center;
				line-height: 58px;
				text-decoration: none;
				color: #fff;
			}

			.bg1 {
				background-image: url(../images/bg1.png);
				background-repeat: no-repeat;
				/* 这两行代码可简写 */
				/* background: url(../images/bg1.png) no-repeat; */
			}

			.bg1:hover {
				background-image: url(../images/bg11.png);
			}

			.bg2 {
				background-image: url(../images/bg2.png);
				background-repeat: no-repeat;
			}

			.bg2:hover {
				background-image: url(../images/bg22.png);
			}

			.bg3 {
				background-image: url(../images/bg3.png);
				background-repeat: no-repeat;
			}

			.bg4 {
				background-image: url(../images/bg4.png);
				background-repeat: no-repeat;
			}

			.bg5 {
				background-image: url(../images/bg5.png);
				background-repeat: no-repeat;
			}
		</style>
	</head>

	<body>
		<div><a href="" class="bg1">五彩按钮</a>
			<a href="" class="bg2">五彩按钮</a>
			<a href="" class="bg3">五彩按钮</a>
			<a href="" class="bg4">五彩按钮</a>
			<a href="" class="bg5">五彩按钮</a>
		</div>

	</body>
</html>
